<template>
  <div>
    <div class="restaurant_top">
      <h1>商家推荐</h1>
      <ul>
        <li v-for="(item,index) of topList" :key="index">{{item}}</li>
      </ul>
    </div>
    <router-link
      to="/shoper"
      tag="div"
    >
      <div class="restaurant_info" v-for="(item, index) of list" :key="item.id">
        <div class="restaurant_info_top">
        <div class="restaurant_info_topImg">
          <img v-lazy="item.imgUrl">
        </div>
        <div class="restaurant_info_topMes">
          <div class="name">
            <h1>{{item.name}}</h1>
          </div>
          <div class="star">
                <span>
                  <img :src="item.iconUrl">
                </span>
            <span>{{item.point}}</span>
            <span>月售{{item.num}}单</span>
            <div class="bike">{{item.tran_type}}</div>
          </div>
          <div class="condition">
            <div class="condition_left">
              <span>{{item.tips}}</span>
              <span>{{item.no_subsidy_fee}}</span>
            </div>
            <div class="condition_right">
              <span>{{item.distance}}</span>
              <span>{{item.tran_time}}分钟</span>
            </div>
          </div>
        </div>
      </div>
        <div class="restaurant_info_bottom">
        <div class="restaurant_tag">
          <span>汉堡</span>
          <span>品质联盟</span>
        </div>
        <div class="restaurant_tag1"
             v-for="items of item.actives"
             :key="item.id"
        >
          <span :style="{'background-color':'#'+items.icon_color, fontSize:14+'px'}">
            {{items.icon_name}}
          </span>
          <span>{{items.tags}}</span>
        </div>
        <!--<div class="restaurant_tag2">-->
          <!--<span>减</span>-->
          <!--<span>满25减10，满35减14，满50减23</span>-->
        <!--</div>-->
         <fade-animation>
            <div class="actives_more_show" v-if="item.moreActive">
              <ul>
                <li v-for="items of item.activeslist"
                    :key="item.id">
                  <span :style="{'background-color':'#'+items.icon_color, fontSize:14+'px'} " >
                    {{items.icon_name}}
                  </span>
                  {{items.tags}}
                </li>
              </ul>
            </div>
         </fade-animation>
      </div>
        <!--更多-->
        <div class="actives_more" @click="changeActive(item.id)" @click.stop>
        更多活动<span class="iconfont arrow-icon">&#xe64a;</span>
      </div>
    </div>
    </router-link>
  </div>
</template>


<script>
import FadeAnimation from '../../../common/FadeAnimation'
export default {
  name: 'Restaurant',
  props: {
    list: Array,
    activesList: Array
  },
  data () {
    return {
      topList: ['综合排序', '距离最近', '品质联盟', '推荐'],
      noShow: false
    }
  },
  methods: {
    changeActive (index) {
      this.list[index - 1].moreActive = !this.list[index - 1].moreActive
    }
  },
  components: {
    FadeAnimation
  }
}
</script>

<style  scoped>
  .restaurant_top {
    width:100%;
    height: 60px;
    background-color: #cccccc;
    text-align: center;
  }
  .restaurant_top h1 {
    font-size: 20px;
    font-weight:bold;
    margin: 5px 0 5px 0;
    padding-top: 5px;
  }
  .restaurant_top ul li{
    line-height: 35px;
    height: 35px;
    width: 25%;
    float: left;
  }
  .restaurant_info {
    margin-top: 5px;
    /*height: 200px;*/
    width: 100%;
    /*background-color: yellow;*/
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid rgba(21, 19, 19, 0.3);
  }
  .restaurant_info_top {
    width: 100%;
    height: 100px;
    display: flex;
  }
  .restaurant_info_topImg {
    margin-left: 5px;
    float: left;
  }
  .restaurant_info_topImg img {
    width: 100px;
    height: 100px;
  }
  .restaurant_info_topMes {
    margin: 10px;
    float: left;
    flex: 1;
  }
  .name>h1 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow:ellipsis ;
    white-space: nowrap;
  }
  .star>span {
    margin-right: 5px;
    font-size: 10px;
    color: #cccccc;
  }
  .bike {
    background-color: #3a33d1;
    float: right;
    margin-left: 40px;
    color: white;
    font-size: 14px;
  }
  .condition {
    margin-top: 22px;
  }
  .condition_left {
    float: left;
  }
  .condition_left :first-child {
    border-right: 1px solid #333333;
    padding-right: 6px;
  }
  .condition_right {
    float: right;
    font-size: 12px;
    color: #2e2e2e;
    padding-top: 2px;
  }
  .condition_right :first-child {
    border-right: 1px solid #333333;
    padding-right: 6px;
  }
  .restaurant_info_bottom {
    margin-left: 115px;
    margin-top: 15px;
  }
  .restaurant_tag {
    margin-top: 13px;
    font-size: 12px;
  }
  .restaurant_tag span {
    margin-right:10px;
    padding:2px;
  }
  .restaurant_tag :first-child {
    padding: 1px 3px;
    border: 1px solid #cccccc;
    border-radius: 3px;
  }
  .restaurant_tag1 {
    margin-top: 13px;
    font-size: 12px;
  }
  .restaurant_tag1 span {
    margin-right: 10px;
    font-size: 12px;
    padding: 2px;
    border-radius: 3px;
  }
  .restaurant_tag2 span {
    background-color: red;
    margin-right: 10px;
    font-size: 14px;
    padding: 2px;
    border-radius: 3px;
  }
  .actives_more_show {
    margin-top: 10px;
  }
  .actives_more_show ul li {
    line-height: 12px;
    font-size: 12px;
    margin-top: 10px;
  }
  .actives_more_show ul li span{
    background-color: red;
    font-size: 14px;
    margin-right: 13px;
    padding: 2px;
    border-radius: 3px;
  }
  .actives_more {
    position: absolute;
    top:130px;
    right: 10px;
    font-size: 12px;
  }
  .actives_more span {
    margin-left: 3px;
  }
</style>





